<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auction Dapp</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        neutral: '#1E293B',
                        'neutral-light': '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .nav-link {
                @apply text-neutral hover:text-primary transition-colors duration-200;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
        <div class="container-fluid px-4">
            <a class="navbar-brand text-primary font-bold text-xl" href="#">
                <i class="fa fa-gavel mr-2"></i>Auction
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active px-4" aria-current="page" href="#">拍卖</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link px-4" href="#">查询</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center ml-auto">
                    <!-- 添加了用户头像 -->
                    <div class="relative mr-3">
                        <img src="https://picsum.photos/200/200" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white shadow-sm object-cover">
                        <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
                    </div>
                    <span class="text-sm bg-gray-100 px-3 py-1.5 rounded-full text-neutral font-medium">
                        <i class="fa fa-wallet mr-1"></i> 0x1234...abcd
                    </span>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容 -->
    <main class="container py-8 max-w-5xl">
        <!-- 拍卖信息卡片 -->
        <div class="bg-white rounded-xl p-6 shadow-lg mb-8 transform transition-all duration-300 hover:shadow-xl">
            <div class="flex flex-col md:flex-row gap-6">
                <div class="w-full md:w-1/3">
                    <div class="relative rounded-lg overflow-hidden aspect-square bg-gray-100">
                        <img src="https://picsum.photos/400/400" alt="拍卖物品" class="w-full h-full object-cover">
                        <div class="absolute top-3 right-3 bg-primary text-white text-xs px-2 py-1 rounded-full">
                            拍卖中
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-2/3">
                    <h1 class="text-2xl font-bold text-neutral mb-2">稀世NFT艺术品拍卖</h1>
                    <p class="text-gray-600 mb-4">这是一件极其稀有的数字艺术品，具有独特的设计和收藏价值。</p>
                    
                    <div class="grid grid-cols-2 gap-4 mb-6">
                        <div class="bg-gray-50 rounded-lg p-4">
                            <p class="text-sm text-gray-500 mb-1">当前最高价</p>
                            <p class="text-2xl font-bold text-primary" id="higestBid"></p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <p class="text-sm text-gray-500 mb-1">拍卖结束时间</p>
                            <p class="text-lg font-semibold text-neutral">
                                <i class="fa fa-clock-o mr-1"></i> 02d 14h 30m 12s
                            </p>
                        </div>
                    </div>

                    <div class="flex flex-col md:flex-row gap-4">
                        <div class="w-full md:w-1/2">
                            <label class="block text-sm font-medium text-gray-700 mb-2">出价金额 (ETH)</label>
                            <div class="relative">
                                <input type="number" step="0.01" min="4.26" placeholder="输入出价金额" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <span class="text-gray-500">ETH</span>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/2 flex items-end">
                            <button class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:-translate-y-0.5 hover:shadow-lg flex items-center justify-center">
                                <i class="fa fa-gavel mr-2"></i> 立即出价
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 拍卖详情 -->
        <div class="bg-white rounded-xl p-6 shadow-lg mb-8">
            <h2 class="text-xl font-bold text-neutral mb-4">拍卖详情</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="font-semibold text-gray-700 mb-2">拍卖合约信息</h3>
                    <ul class="space-y-3">
                        <li class="flex justify-between">
                            <span class="text-gray-600">最高出价者</span>
                            <span class="font-medium" id="highestBidder"></span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">拍卖开始时间</span>
                            <span class="font-medium">2025-05-15 10:00:00</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">拍卖时长</span>
                            <span class="font-medium">7天</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-600">合约所有者</span>
                            <span class="font-medium" id="address_owner"></span>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-semibold text-gray-700 mb-2">拍卖规则</h3>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                            <span>出价必须高于当前最高价</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                            <span>拍卖结束前无法撤回最高出价</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                            <span>拍卖结束后，最高出价将转给合约所有者</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                            <span>出价高于当前最高价时，之前的最高价将被退还</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 出价历史 -->
        <div class="bg-white rounded-xl p-6 shadow-lg">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold text-neutral">出价历史</h2>
                <div class="text-sm text-gray-500">共 <span class="font-medium">12</span> 次出价</div>
            </div>
            
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left">
                    <thead class="text-xs text-gray-500 uppercase bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 rounded-l-lg">排名</th>
                            <th class="px-4 py-3">出价者</th>
                            <th class="px-4 py-3">出价金额</th>
                            <th class="px-4 py-3">出价时间</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <tr class="bg-primary/5">
                            <td class="px-4 py-3 font-medium">1</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 mr-2">
                                        <i class="fa fa-user"></i>
                                    </div>
                                    <span class="font-medium">0x5678...efgh</span>
                                </div>
                            </td>
                            <td class="px-4 py-3 font-bold text-primary">4.25 ETH</td>
                            <td class="px-4 py-3 text-gray-600">2小时前</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 font-medium">2</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 mr-2">
                                        <i class="fa fa-user"></i>
                                    </div>
                                    <span class="font-medium">0x9012...mnop</span>
                                </div>
                            </td>
                            <td class="px-4 py-3">4.20 ETH</td>
                            <td class="px-4 py-3 text-gray-600">5小时前</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 font-medium">3</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 mr-2">
                                        <i class="fa fa-user"></i>
                                    </div>
                                    <span class="font-medium">0x3456...qrst</span>
                                </div>
                            </td>
                            <td class="px-4 py-3">4.15 ETH</td>
                            <td class="px-4 py-3 text-gray-600">昨天</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 font-medium">4</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 mr-2">
                                        <i class="fa fa-user"></i>
                                    </div>
                                    <span class="font-medium">0x7890...uvwx</span>
                                </div>
                            </td>
                            <td class="px-4 py-3">4.10 ETH</td>
                            <td class="px-4 py-3 text-gray-600">昨天</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 font-medium">5</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 mr-2">
                                        <i class="fa fa-user"></i>
                                    </div>
                                    <span class="font-medium">0x1234...abcd</span>
                                </div>
                            </td>
                            <td class="px-4 py-3">4.05 ETH</td>
                            <td class="px-4 py-3 text-gray-600">2天前</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="mt-4 flex justify-center">
                <button class="text-primary hover:text-primary/80 font-medium flex items-center transition-colors">
                    查看更多 <i class="fa fa-chevron-down ml-1"></i>
                </button>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral text-white py-8 mt-12">
        <div class="container max-w-5xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">Auction Dapp</h3>
                    <p class="text-gray-400">安全、透明的区块链拍卖平台，让数字资产交易更加公平公正。</p>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-telegram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-discord"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">拍卖市场</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">创建拍卖</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">帮助中心</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-2">
                        <li class="flex items-center text-gray-400">
                            <i class="fa fa-envelope mr-2"></i> support@auctiondapp.com
                        </li>
                        <li class="flex items-center text-gray-400">
                            <i class="fa fa-map-marker mr-2"></i> 虚拟空间，Web3世界
                        </li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                &copy; 2025 Auction Dapp. All rights reserved.
            </div>
        </div>
    </footer>

</body>

<!-- // web3js包 -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', async () => {
        if (typeof window.ethereum !== 'undefined') {
            const web3 = new Web3(window.ethereum);
            let account;

            try {
                await window.ethereum.request({ method: 'eth_requestAccounts' });
                const accounts = await web3.eth.getAccounts();
                account = accounts[0];

                // 这里需要替换为你实际部署的智能合约地址和ABI
                const contractAddress = '0x538D2755B5Fb9A4f7c5769bdcf5103E569D6E241';
                // 合约abi
                const contractABI = [
	{
		"inputs": [],
		"name": "auctionEnd",
		"outputs": [],
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"inputs": [],
		"name": "bid",
		"outputs": [],
		"stateMutability": "payable",
		"type": "function"
	},
	{
		"inputs": [
			{
				"internalType": "address",
				"name": "_owner",
				"type": "address"
			},
			{
				"internalType": "uint256",
				"name": "_auctionLength",
				"type": "uint256"
			}
		],
		"stateMutability": "nonpayable",
		"type": "constructor"
	},
	{
		"inputs": [
			{
				"internalType": "uint256",
				"name": "highestBid",
				"type": "uint256"
			}
		],
		"name": "BidNotHighEnough",
		"type": "error"
	},
	{
		"inputs": [],
		"name": "withdraw",
		"outputs": [],
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"inputs": [],
		"name": "bidEndTime",
		"outputs": [
			{
				"internalType": "uint256",
				"name": "",
				"type": "uint256"
			}
		],
		"stateMutability": "view",
		"type": "function"
	},
	{
		"inputs": [],
		"name": "highestBid",
		"outputs": [
			{
				"internalType": "uint256",
				"name": "",
				"type": "uint256"
			}
		],
		"stateMutability": "view",
		"type": "function"
	},
	{
		"inputs": [],
		"name": "highestBidder",
		"outputs": [
			{
				"internalType": "address",
				"name": "",
				"type": "address"
			}
		],
		"stateMutability": "view",
		"type": "function"
	},
	{
		"inputs": [],
		"name": "owner",
		"outputs": [
			{
				"internalType": "address",
				"name": "",
				"type": "address"
			}
		],
		"stateMutability": "view",
		"type": "function"
	},
	{
		"inputs": [
			{
				"internalType": "address",
				"name": "",
				"type": "address"
			}
		],
		"name": "pendingReturns",
		"outputs": [
			{
				"internalType": "uint256",
				"name": "",
				"type": "uint256"
			}
		],
		"stateMutability": "view",
		"type": "function"
	}
];
                const auctionContract = new web3.eth.Contract(contractABI, contractAddress);

                // 获取最高价
                const highestBid = await auctionContract.methods.highestBid().call();
                const a = document.getElementById("higestBid");
                a.innerHTML = highestBid;

                // 获取最高价出价者
                const highestBidder = await auctionContract.methods.highestBidder().call(); 
                const b = document.getElementById("highestBidder");
                b.innerHTML = highestBidder;

                // 获取合约所有者
                const addressOwner = await auctionContract.methods.owner().call();  // 从合约获取值
                const c = document.getElementById("address_owner");
                c.innerHTML = addressOwner;

                const bidButton = document.getElementById('bidButton');
                const withdrawButton = document.getElementById('withdrawButton');
                const endAuctionButton = document.getElementById('endAuctionButton');

                bidButton.addEventListener('click', async () => {
                    const bidAmount = document.getElementById('bidAmount').value;
                    if (bidAmount) {
                        const bidValue = web3.utils.toWei(bidAmount, 'ether');
                        try {
                            await auctionContract.methods.bid().send({
                                from: account,
                                value: bidValue
                            });
                            alert('竞拍成功！');
                        } catch (error) {
                            console.error('竞拍失败:', error);
                            alert('竞拍失败，请检查网络或重试！');
                        }
                    } else {
                        alert('请输入竞拍金额！');
                    }
                });

                withdrawButton.addEventListener('click', async () => {
                    try {
                        await auctionContract.methods.withdraw().send({ from: account });
                        alert('提款成功！');
                    } catch (error) {
                        console.error('提款失败:', error);
                        alert('提款失败，请检查网络或重试！');
                    }
                });

                endAuctionButton.addEventListener('click', async () => {
                    try {
                        await auctionContract.methods.endAuction().send({ from: account });
                        alert('拍卖已结束！');
                    } catch (error) {
                        console.error('结束拍卖失败:', error);
                        alert('结束拍卖失败，请检查网络或重试！');
                    }
                });
            } catch (error) {
                console.error('用户拒绝授权或发生错误:', error);
                alert('请授权使用MetaMask账户！');
            }

            // 监听账户切换事件
            window.ethereum.on('accountsChanged', (newAccounts) => {
                if (newAccounts.length > 0) {
                    account = newAccounts[0];
                    console.log('账户已切换为:', account);
                } else {
                    console.log('未检测到账户，请连接钱包。');
                }
            });
        } else {
            alert('请安装MetaMask钱包以使用此功能！');
        }

    });
</script>